class Drawer {
    constructor (opition) {
        this.opition = Object.assign({
            el: '.drawer',
            size: 450,
            direction: 'right',
            onopen: function () {
                console.log('抽屉打开')
            },
            onclose: function () {
                console.log('抽屉关闭')
            },
        }, opition)
        this.model = document.querySelector(this.opition.el)
        this.layer = document.querySelector('.qg-model')
        this.setting(this.opition)
    }

    //设置提升
    setting (opition) {
        var { direction } = opition
        direction === 'top' || direction === 'bottom' ? this.model.style.left = 0 : this.model.style.top = 0
        this.model.style.width = direction === 'top' || direction === 'bottom' ? '100%' : opition.size + 'px'
        this.model.style.height = direction === 'left' || direction === 'right' ? '100%' : opition.size + 'px'
        this.model.style[opition.direction] = '-' + opition.size + 'px'
    }

    showModel () {
        var { direction } = this.opition
        this.layer.style.zIndex = '10'
        setTimeout(() => {
            this.layer.style.zIndex = '10'
            this.model.style[direction] = 0
            this.layer.style.opacity = 1
        }, 20)
        this.bindEvent()
    }

    hideModel () {
        var { direction, size } = this.opition
        this.animate(() => {
            this.model.style[direction] = '-' + size + 'px'
            this.layer.style.opacity = 0
        })
        setTimeout(() => {
            this.layer.style.zIndex = '-1'
        }, 350)
    }
    animate(callback){
        setTimeout(()=>{
            callback()
        },20)
    }
    bindEvent () {
        var _this = this
        this.layer.onclick = function () {
            _this.hideModel()
        }
    }
}